<template>
	<div id="container">
		<div id = "addcontent">
		<el-form size="large">
			<el-form-item >
				<h1>图书添加</h1>
			</el-form-item>
			<el-form-item label="书名:">
				
				<el-input v-model="book.bookName"></el-input>
			
			</el-form-item>
			<el-form-item label="价格:">
				
				<el-input type="price" v-model="book.price"></el-input>
			
			</el-form-item>
			<el-form-item label="作者:">
				<el-input type="author" v-model="book.author"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="info" @click="add()">添加</el-button>
			</el-form-item>
		</el-form>
		</div>
	</div>
</template>

<script>
	export default{
		name:'BookAddView',
		data(){
			return {
				book:{
					bookName:'',
					price:'',
					author:'',
				}
			}
		},
		methods:{
			add(){
				
				this.$axios.post("http://localhost:9003/book/add",this.book)
				.then(rst=>{
					if(rst.data.code==200){
						//this.$message("操作结束");
						this.$alert("操作成功","提示");
					}else{
						alert("操作失败")
					}
				}).catch(err=>{
					console.log(err);
				})
				
			}
		}
	}
</script>

<style scoped>
	#container{
		width: 100%;
		height: 100%;
		background-color: lightcyan;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#addcontent{
		width: 400px;
		height: 350px;
		border-radius: 10px;
		padding: 20px;
		box-sizing: border-box;
		box-shadow: 0px 0px 30px gray;
	}
	#addcontent h1{
		text-align: center;
		width: 100%;
		height: 50px;
	}
	#addcontent a{
		#login_content a{
			text-decoration: none;
			margin-right: 10px;
		}
	}
</style>